<template>
  <view class="hydropower">
    <view class="return-box" @click="goBack">
      <up-icon name="arrow-left"></up-icon>
    </view>
    <view class="return-title"> 房屋列表 </view>
    <h4 class="title">生活缴费</h4>
    <none-data v-if="billList.length === 0" />
    <view v-if="options == '水表'">
      <hydropowerCard
        v-for="item in billList"
        :key="item.accountNumber"
        :room="item.accountNumber"
        :id="item.id"
        :type="options"
        :identifier="item.imeiWater"
        :nickname="item.name"
        :unit="item.unit"
        :balance="item.waterNumber"
        :standard="item.waterChargeStandard"
        @onClick="hydropowerClick"
      ></hydropowerCard>
      <!-- :balance="item.waterAccount" -->
    </view>
    <view v-else>
      <hydropowerCard
        v-for="item in billList"
        :key="item.accountNumber"
        :id="item.id"
        :room="item.accountNumber"
        :type="options"
        :identifier="item.imeiWater"
        :nickname="item.name"
        :unit="item.unit"
        :balance="item.electricityNumber"
        standard=""
        @onClick="hydropowerClick"
      ></hydropowerCard>
      <!-- :balance="item.electricityAccount" -->
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import hydropowerCard from "@/package_property/pages/components/hydropower-card/index.vue";
import { customNav } from "@/utils/customNav";
import { getWaterElectricityListApi } from "@/package_property/pages/api/life-services.js";
const options = ref("");
const page = ref(1);
const size = ref(10);
const total = ref(0);
const billList = ref([]);

function hydropowerClick(data) {
  if (data.unit !== '2') {
  customNav(`hydropower-details?data=${JSON.stringify(data)}`);
  } else {
  customNav(`dosage-list?type=${data.type}&room=${data.room}`);
  }
}
onLoad((option) => {
  console.log(option);
  options.value = option.type;
  // getWaterElectricityList();
});
onShow(() => {
  getWaterElectricityList();
});
function goBack() {
  uni.navigateBack({
    delta: 1, // 默认值是1，表示返回的页面层数
  });
}
async function getWaterElectricityList() {
  const option = {
    page: page.value,
    size: size.value,
    queryType: options.value == "水表" ? "1" : "2",
  };
  const res = await getWaterElectricityListApi(option);
  const { code, data } = res || {};
  if (code == 200) {
    total.value = data.total;
    billList.value = data.records;
  }
}
</script>

<style lang="less" scoped>
.hydropower {
  padding-top: 100rpx;
  position: relative;
  .title {
    font-family: "ali-m";
    font-weight: 500;
    font-size: 30rpx;
    color: #313233;
    height: 70rpx;
    line-height: 70rpx;
    padding-left: 30rpx;
  }
}
</style>
